<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moss Call</title>
    <style>
		:root {
            --accept-color: #34C759;
            --decline-color: #FF3B30;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            background: #000;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .call-container {
            background: linear-gradient(160deg, #1A1A1A 60%, #2A2A2A);
            width: 100%;
            max-width: 300px;
            color: #fff;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            margin-bottom: 4em;
        }

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 28px;
            margin: 0 auto 2rem;
            overflow: hidden;
            box-shadow: 0 0 30px rgba(0, 122, 255, 0.2);
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .caller-info {
            text-align: center;
            margin-bottom: 2rem;
        }

        .caller-name {
            font-size: 2rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .call-status {
            color: #868686;
            font-size: 1.1rem;
        }

        .controls {
            width: 100%;
            margin-top: 2rem;
        }

        .button-row {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-bottom: 1.5rem;
        }

        .call-button {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .call-button:active {
            transform: scale(0.95);
        }

        .accept-button {
            background: var(--accept-color);
            box-shadow: 0 5px 15px rgba(52, 199, 89, 0.3);
        }

        .decline-button {
            background: var(--decline-color);
            box-shadow: 0 5px 15px rgba(255, 59, 48, 0.3);
        }

        .button-icon {
            width: 30px;
            height: 30px;
            color: white;
        }

        .active-call {
            display: none;
            text-align: center;
        }

        .timer {
            font-size: 1.8rem;
            color: #868686;
            margin: 1.5rem 0;
        }

        .end-call {
            width: 70px;
            height: 70px;
            margin: 0 auto;
        }
		
		/* 修改后的底部居中署名条 */
        .credits-bar {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            padding: 10px 25px;
            border-radius: 30px;
            font-size: 0.9rem;
            backdrop-filter: blur(8px);
            z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: slideUp 0.6s ease-out;
            display: flex;
            align-items: center;
	   	 	white-space: nowrap;
            gap: 8px;
        }

        .credits-bar a {
            color: #34C759;
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

        .credits-bar a:hover {
            opacity: 0.8;
        }

        @keyframes slideUp {
            from { 
                transform: translate(-50%, 100%);
                opacity: 0;
            }
            to { 
                transform: translate(-50%, 0);
                opacity: 1;
            }
        }

        /* 毛玻璃覆盖层 */
        .glass-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.2); /* 半透明底色 */
            backdrop-filter: blur(10px); /* 关键属性：毛玻璃效果 */
            -webkit-backdrop-filter: blur(10px); /* Safari 兼容 */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000; /* 确保在最上层 */
            opacity: 0;
            animation: all 0.5s ease-in-out forwards;
        }

        /* 文字内容样式 */
        .glass-content {
            text-align: center;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            max-width: 80%;
        }

        .glass-content h1 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .glass-content p {
            font-size: 1.2rem;
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="glass-overlay">
        <div class="glass-content">
            <h1>媒体文件加载中...</h1>
            <p>我们需要一些时间，准备完成后即可访问全部内容</p>
            <p>请耐心等待，感谢您的配合</p>
        </div>
    </div>
    <div class="call-container">
        <!-- 来电界面 -->
        <div class="incoming-call">
            <div class="avatar">
                <img id="img-moss" src="moss.jpg" alt="联系人头像">
            </div>
            
            <div class="caller-info">
                <h1 class="caller-name">Moss</h1>
                <p class="call-status" style="display: none;">信号接入</p>
            </div>

            <div class="controls">
                <div class="button-row">
                    <button class="call-button decline-button" onclick="endCall()">
                        <svg class="button-icon" viewBox="0 0 24 24">
                            <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                        </svg>
                    </button>
                    <button class="call-button accept-button" onclick="answerCall()">
                        <svg class="button-icon" viewBox="0 0 24 24">
                            <path fill="currentColor" d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.21l-1.57 1.97c-2.83-1.35-5.48-3.5-7.26-6.39l2.53-2.55c.28-.28.36-.67.25-1.02-.37-1.11-.56-2.28-.56-3.5 0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- 通话中界面 -->
        <div class="active-call">
            <div class="avatar">
                <img id="img-moss-1" src="moss.jpg" alt="联系人头像">
            </div>
            
            <div class="caller-info">
                <h1 class="caller-name">Moss</h1>
                <div class="timer">00:00</div>
            </div>

            <div class="controls">
                <div class="button-row">
                    <button class="call-button">
                        <svg class="button-icon" viewBox="0 0 24 24">
                            <path fill="currentColor" d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                        </svg>
                    </button>
                    <button class="call-button">
                        <svg class="button-icon" viewBox="0 0 24 24">
                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86l2.13 2.13C7 13.46 6 14.62 6 16c0 1.66 1.34 3 3 3s3-1.34 3-3c0-1.38-.97-2.55-2.28-2.91l2.13-2.13c.28.03.57.05.86.05 4.41 0 8 3.59 8 8s-3.59 8-8 8z"/>
                        </svg>
                    </button>
                </div>
                <button class="call-button end-call decline-button" onclick="endCall()">
                    <svg class="button-icon" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
                    </svg>
                </button>
            </div>
        </div>
		
		<audio id="audio-moss" controls="controls" preload="auto" hidden src="moss.wav"></audio>

        <audio id="audio-access" controls="controls" preload="auto" hidden src="access.wav"></audio>

		<!-- 修改后的底部署名条 -->
		<div class="credits-bar">
			<span>🤖 由</span>
			<a href="https://www.deepseek.com" target="_blank" rel="noopener">
				DeepSeek-R1
			</a>
			<span>提供代码支持</span>
		</div>
    </div>


    <script>
        let callDuration = 0;
        let timerInterval;

        function answerCall() {
            document.querySelector('.incoming-call .controls').style.display = 'none';
            document.querySelector('.incoming-call .call-status').style.display = 'block';
	    	document.getElementById('audio-access').play();

            mainTimerInterval = setInterval(() => {
                clearInterval(mainTimerInterval);
                document.querySelector('.incoming-call').style.display = 'none';
                document.querySelector('.active-call').style.display = 'block';
                document.getElementById('audio-moss').play();

                timerInterval = setInterval(() => {
                    callDuration++;
                    if (callDuration == 44) {
                        clearInterval(timerInterval);
                        document.querySelector('.timer').textContent = `通话结束`;
                        document.querySelector('.active-call .controls').style.display = 'none';
                    } else {
                        const minutes = Math.floor(callDuration / 60).toString().padStart(2, '0');
                        const seconds = (callDuration % 60).toString().padStart(2, '0');
                        document.querySelector('.timer').textContent = `${minutes}:${seconds}`;
                    }
                }, 1000);
			}, 2000);
		}

        function endCall() {
            clearInterval(timerInterval);
            document.querySelector('.call-container').style.animation = 'hangUp 0.3s forwards';
            setTimeout(() => {
                window.close();
            }, 300);
        }
		
        document.addEventListener('DOMContentLoaded', function() {
            console.log("页面已加载，开始加载音频和图片...");
            const overlay = document.querySelector("div.glass-overlay");
            overlay.style.opacity = 1;

            // // 全局未处理错误捕获（兜底）
            // window.addEventListener('error', function(e) {
            //     console.error('全局捕获错误:', e);
            //     showErrorOverlay('未知错误导致加载失败');
            // });
            // window.addEventListener('unhandledrejection', function(e) {
            //     console.error('未处理的 Promise 拒绝:', e.reason);
            //     showErrorOverlay(e.reason.message || '资源加载失败');
            // });

            const resources = [
                ...document.querySelectorAll('img'),
                ...document.querySelectorAll('audio')
            ];

            function loadResource(element) {
                return new Promise((resolve, reject) => {
                    // 统一错误处理函数
                    const cleanAndReject = (error) => {
                        element.removeEventListener('load', onLoad);
                        element.removeEventListener('error', onError);
                        reject(error);
                    };

                    // 通用加载成功处理
                    const onLoad = () => cleanAndResolve();
                    const cleanAndResolve = () => {
                        element.removeEventListener('load', onLoad);
                        element.removeEventListener('error', onError);
                        resolve();
                    };

                    // 错误处理（细化类型）
                    const onError = (e) => {
                        const error = new Error(
                            `资源加载失败: ${element.tagName} ${element.src || ''} | 类型:${e.type} 状态:${element.readyState}`
                        );
                        cleanAndReject(error);
                    };

                    if (element.tagName === 'IMG') {
                        // 图片处理
                        if (element.complete) {
                            element.naturalWidth > 0 ? resolve() : reject(new Error('图片已加载但无效'));
                        } else {
                            element.addEventListener('load', onLoad);
                            element.addEventListener('error', onError);
                        }
                    } else if (element.tagName === 'AUDIO') {
                        // 音频处理：确保先绑定事件再操作
                        element.addEventListener('canplaythrough', onLoad);
                        element.addEventListener('error', onError);
                        
                        // 若已设置 src，重新加载以触发事件
                        if (element.src) {
                            element.load(); 
                        } else {
                            reject(new Error('音频元素未设置 src'));
                        }
                    }
                });
            }

            // 记录每个资源的加载状态
            let loadedCount = 0;
            function updateProgress() {
                loadedCount++;
                console.log(`加载进度: ${loadedCount}/${resources.length}`);
            }

            Promise.all(resources.map(resource => 
                loadResource(resource)
                    .then(() => {
                        updateProgress();
                        return true;
                    })
                    .catch(error => {
                        console.error('资源加载失败（详细）:', error.message);
                        updateProgress();
                        throw error; // 继续传递错误
                    })
            ))
            .then(() => {
                console.log("所有资源加载完成！");
                overlay.remove();
            })
            .catch((error) => {
                console.error("资源加载终止，原因:", error);
                showErrorOverlay(error.message);
            });

            function showErrorOverlay(message) {
                document.querySelector("div.glass-overlay h1").textContent = "媒体文件加载失败";
                document.querySelectorAll("div.glass-overlay p")[0].textContent = "请检查网络连接或刷新重试";
                document.querySelectorAll("div.glass-overlay p")[1].textContent = "如果问题持续存在，请暂停访问并反馈";
                overlay.style.opacity = 1; // 确保错误信息可见
            }
        });
    </script>
</body>
</html>
